<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressDeliveryManagementLang.sign')"
      :visible.sync="Visible"
      width="400px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxItem">
            <div style="width:100%;" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.sign_type')}}:
              </div>
              <div class="contant">
                <el-select
                  ref="status"
                  filterable
                  allow-create
                  @blur="handleBlur('status', $event)"
                  @change="handleChang('status')"
                  v-model="data.status"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_status"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      order_sn:'',
      data:{
        status:2,
      },
      options_status:[],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.order_sn=data.order_sn
      this.getOptions()
      this.Visible = true;
    },
    //获取下拉单数据
    getOptions(){
      this.$get("orderSysItems").then((res) => {
        this.options_status = res.data.waybill_untrans_status;
      });
    },
    // 提交修改
    confirm() {
      let type=true
      if (!this.data.status&&this.data.status!==0) {
        this.$refs.status.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      // 是否有空值必选项标识
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
         let params = new FormData();
          params.append("order_sn", this.order_sn);
          params.append("status", this.data.status);
          this.$postForm("shippingOrderStatus", params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");
              this.cancel()
            }
          });
      }
    },
    //取消修改
    cancel() {
      this.data={
        status:2,
      } 
      this.Visible = false;
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem .dialogBoxItemRow {
    width: 24%;
  }
</style>